<script lang="ts">
    import { realtime } from "../stores";

    import Title from "../../../components/Title/Title.svelte";
    import { onMount, onDestroy } from "svelte";

    let scrollBox;
    let container;
    let affix;
    let timer: any;

    function roll(t) {
        scrollBox.scrollTop = 0;
        if (container) {
            affix.innerHTML = container.innerHTML;
        }
        rollStart(t);
    }

    function rollStart(t) {
        rollStop();
        if (container) {
            container.scrollHeight;
            timer = setInterval(() => {
                if (scrollBox.scrollTop >= container.scrollHeight) {
                    scrollBox.scrollTop = 0;
                } else {
                    scrollBox.scrollTop = scrollBox.scrollTop + 1;
                }
            }, t);
        }
    }

    function rollStop() {
        timer && clearInterval(timer);
    }

    onMount(async () => {
        const urlParams = new URLSearchParams(window.location.search);
        const type = urlParams.get("type") || 1;
        await realtime.get(type);
        roll(80);
    });

    onDestroy(() => rollStop());
</script>

<div class="flex flex-col h-full">
    <Title title="实时报警数据" />
    <div class="flex-1 flex flex-col p-1 w-full overflow-hidden">
        <div
            class="flex text-center text-white bg-color-08418C text-sm 2xl:text-xl 3xl:text-3xl 4xl:text-4xl rounded-sm 3xl:rounded-xl"
        >
            <div class="basis-1/3 truncate">设备名称</div>
            <div class="basis-1/5 truncate">设备种类</div>
            <div class="basis-1/5 truncate">设备状态</div>
            <div class="basis-1/3 truncate">运行时间/min</div>
        </div>
        <!-- svelte-ignore a11y-mouse-events-have-key-events -->
        <div
            class="flex-1 overflow-hidden"
            bind:this={scrollBox}
            on:mouseover={rollStop}
            on:mouseout={() => {
                rollStart(60);
            }}
        >
            {#if $realtime.length > 0}
                <div class="" bind:this={container}>
                    {#each $realtime as row}
                        <div
                            class="flex text-center text-white text-xs 2xl:text-lg 3xl:text-2xl 4xl:text-3xl rounded-md 3xl:rounded-xl msg-container"
                        >
                            <div class="basis-1/3 truncate">{row.name}</div>
                            <div class="basis-1/5 truncate">{row.type}</div>
                            <div class="basis-1/5 truncate">{row.status}</div>
                            <div class="basis-1/3 truncate">{row.timer}</div>
                        </div>
                    {/each}
                </div>
            {:else}
                <div
                    class="text-center text-white text-xs 2xl:text-lg 3xl:text-2xl 4xl:text-3xl rounded-md 3xl:rounded-xl msg-container"
                >
                    暂无数据
                </div>
            {/if}

            <div bind:this={affix} />
        </div>
    </div>
</div>

<style>
    .bg-color-08418C {
        line-height: 1.75 !important;
        background: linear-gradient(
            90deg,
            #08418c 0%,
            #0059cf 12.5%,
            #08418c 25%,
            #08418c 37.5%,
            #0059cf 50%,
            #08418c 62.5%,
            #08418c 75%,
            #0059cf 87.5%,
            #08418c 100%
        );
    }

    .msg-container {
        line-height: 1.75 !important;
    }

    .msg-container:nth-child(2n + 1) {
        background: linear-gradient(
            90deg,
            #032c5b 0%,
            #014aa9 12.5%,
            #032c5b 25%,
            #032c5b 37.5%,
            #014aa9 50%,
            #032c5b 62.5%,
            #032c5b 75%,
            #014aa9 87.5%,
            #032c5b 100%
        );
    }
</style>
